/**
 * Created by 小敏哥 on 2017/11/24.
 * 底部导航栏
 */
import React, { Component } from 'react';
import style from './index.scss'

class BottomMenu extends Component {
    constructor(props) {
        super(props);
        this.state={
            active:this.props.active?this.props.active:0,
        }
    }

    static propTypes = {
        onChange:React.PropTypes.func,//切换回调函数
        data:React.PropTypes.array,//渲染数据，img：背景图片，checkedImg：选中背景图片，text底部文字
        active:React.PropTypes.number,//初始选中项
    };

    componentWillMount(){
    }

    //点击切换
    setActive(index){
        this.setState({
            active:index
        });
        this.props.onChange&&this.props.onChange(index);
    }

    //渲染底部栏
    renderMenu(){
        return this.props.data.map((item,index)=>{
            let backGroundImg=this.state.active==index?item.checkedImg:item.img;
            let style={background:`url(${backGroundImg}) center top / auto 0.56rem no-repeat scroll`};
            return <div key={index} style={style} onClick={(e)=>{this.setActive(index);e.stopPropagation() }}>
                {item.text}
            </div>
        });
    }


    render() {
        return (
            <div>
                {/*底部切换菜单 start*/}
                <div className={`${style.footNav} border_top_1 footNavPoise`}>
                    {this.renderMenu()}
                </div>
                {/*底部切换菜单 end*/}
                <div className={style.space}></div>
            </div>

        )
    }
}

BottomMenu.defaultProps = {}

//使用context
BottomMenu.contextTypes = {
};

export default BottomMenu;
